<!-- templates/game.html -->
<!DOCTYPE html>
<html>
<head>
    <title>扫雷游戏 - {{difficulty}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="game-container">
        <div class="status-bar">
            <div>全部雷数: <span id="mine-count">0</span></div>
            <div>已标记数量: <span id="flag-count">0</span></div>
            <div>用时: <span id="timer">0</span></div>
        </div>
        <div id="grid" class="grid"></div>
        <div class="controls">
            <button id="flag-toggle" onclick="toggleFlagMode()">标记模式</button>
            <button onclick="resetGame()">重新开始</button>
            <button onclick="window.location.href='/'">返回选择难度</button>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/game.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
        // 检测屏幕宽度，判断是否为移动端
        const isMobile = window.innerWidth <= 768; // 假设屏幕宽度小于等于768px为移动端，可根据实际需求调整
        const columnWidth = isMobile ? '25px' : '30px'; // 移动端25px，其他设备30px

        document.getElementById('grid').style.gridTemplateColumns = `repeat({{cols}}, ${columnWidth})`;
        initGame({{rows}}, {{cols}}, {{mines}});
        });
    </script>
</body>
</html>